<template>
  <div class="warning">
    <div class="top">
      <div class="top_left">
        <div class="title">异常监测预警情况</div>
        <div class="yibiaopan">
          <div id="main11"></div>
          <div id="main22"></div>
          <div id="main33"></div>
          <div id="main44"></div>
        </div>
      </div>
      <div class="top_right">
        <div class="ccc">
          <img src="@/assets/images/21.png" alt="" />
          <p class="text">前期节点亮灯</p>
          <p class="number">200</p>
        </div>
        <div class="ccc">
          <img src="@/assets/images/22.png" alt="" />
          <p class="text">应开工未开工</p>
          <p class="number">41</p>
        </div>
        <div class="ccc">
          <img src="@/assets/images/23.png" alt="" />
          <p class="text">投资强度不足</p>
          <p class="number">200</p>
        </div>
        <div class="ccc">
          <img src="@/assets/images/24.png" alt="" />
          <p class="text">应完工未完工</p>
          <p class="number">200</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="title">异常预警三色图</div>
      <el-table
        class="main55"
        :data="tableData"
        style="width: 100%; margin: 15px"
        height="300px"
        :header-cell-style="{
          background: '#f8f7fc',
          color: '#2f2f2f'
        }"
      >
        <el-table-column
          prop="number"
          align="center"
          label="序号"
          height="20"
          width="60"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="项目名称"
          style="text-align: center"
          width="300"
        >
        </el-table-column>
        <el-table-column
          prop="plan_invest"
          align="center"
          width="200"
          label="年度投资计划"
        >
        </el-table-column>
        <el-table-column
          prop="finish_invest"
          align="center"
          width="200"
          label="年度完成投资"
        >
        </el-table-column>
        <el-table-column
          prop="all_invest"
          align="center"
          width="180"
          label="年度完成投资"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          width="180"
          label="统计入库状态"
        >
        </el-table-column>
        <el-table-column
          prop="warning_type"
          align="center"
          width="200"
          label="预警类型"
        >
        </el-table-column>
        <el-table-column prop="operate_type" align="center" label="操作类型">
        </el-table-column>
      </el-table>
      <p>
        三色预警规则:对前期重要节点未按期完成的项目“前期节点亮灯”预警；对超过计划开工日期未按期开工的项目给予“应开工未开工”预警；对低于建设时序进度70%的项目给予“投资强度不足”预警
        (建设时序进度-当年实际建设时间-当年建设总时间x年度投资计划)；对超过完工时间未按期完工项目给子“应完工未完工”预警。红色:预警项目比例大于或等手50%;黄色:预警项目比例小于50%;绿色:预警项目比例为0%。
      </p>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      option: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '数据指标',
            type: 'gauge',
            axisLine: {
              lineStyle: {
                color: [
                  [0.3, '#47c561'],
                  [0.8, '#3e96fa'],
                  [1, '#f04c55']
                ]
              }
            },
            title: {
              //仪表盘标题show: true,
              offsetCenter: ['0', '73'],
              textStyle: {
                color: '#444A56',
                fontSize: 12,
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei'
              }
            },
            axisLabel: {
              // 刻度标签。

              // show: true, // 是否显示标签,默认 true。

              distance: 11, // 标签与刻度线的距离,默认 5。

              color: '#000', // 文字的颜色,默认 #fff。

              fontSize: 6 // 文字的字体大小,默认 5。

              // formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
            },
            axisTick: {
              // 刻度(线)样式。
              length: 4 // 刻度线长。支持相对半径的百分比,默认 8
            },
            lineStyle: {
              // 刻度(线)样式。
              width: 0.5 //线度,默认 1。
            },
            pointer: {
              // 仪表盘指针。

              show: true, // 是否显示指针,默认 true。

              length: '45%', // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。

              width: 2 // 指针宽度,默认 8。
            },
            detail: { formatter: '{value}%' },
            data: [
              {
                value: 88,
                name: '前期节点亮灯',
                detail: {
                  fontSize: 14,
                  color: '#464646', // 数据详情颜色
                  offsetCenter: ['0%', '60%']
                },
                title: {
                  value: 'hhhhh',
                  color: '#464646' // 标题颜色
                }
              }
            ]
          }
        ]
      },
      option2: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '数据指标',
            type: 'gauge',
            axisLine: {
              lineStyle: {
                color: [
                  [0.3, '#47c561'],
                  [0.8, '#3e96fa'],
                  [1, '#f04c55']
                ]
              }
            },
            title: {
              //仪表盘标题show: true,
              offsetCenter: ['0', '73'],
              textStyle: {
                color: '#444A56',
                fontSize: 12,
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei'
              }
            },
            axisLabel: {
              // 刻度标签。

              // show: true, // 是否显示标签,默认 true。

              distance: 11, // 标签与刻度线的距离,默认 5。

              color: '#000', // 文字的颜色,默认 #fff。

              fontSize: 6 // 文字的字体大小,默认 5。

              // formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
            },
            axisTick: {
              // 刻度(线)样式。
              length: 4 // 刻度线长。支持相对半径的百分比,默认 8
            },
            lineStyle: {
              // 刻度(线)样式。
              width: 0.5 //线度,默认 1。
            },
            pointer: {
              // 仪表盘指针。

              show: true, // 是否显示指针,默认 true。

              length: '45%', // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。

              width: 2 // 指针宽度,默认 8。
            },
            detail: { formatter: '{value}%' },
            data: [
              {
                value: 88,
                name: '应开工未开工',
                detail: {
                  fontSize: 14,
                  color: '#464646', // 数据详情颜色
                  offsetCenter: ['0%', '60%']
                },
                title: {
                  value: 'hhhhh',
                  color: '#464646' // 标题颜色
                }
              }
            ]
          }
        ]
      },
      option3: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '数据指标',
            type: 'gauge',
            axisLine: {
              lineStyle: {
                color: [
                  [0.3, '#47c561'],
                  [0.8, '#3e96fa'],
                  [1, '#f04c55']
                ]
              }
            },
            title: {
              //仪表盘标题show: true,
              offsetCenter: ['0', '73'],
              textStyle: {
                color: '#444A56',
                fontSize: 12,
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei'
              }
            },
            axisLabel: {
              // 刻度标签。

              // show: true, // 是否显示标签,默认 true。

              distance: 11, // 标签与刻度线的距离,默认 5。

              color: '#000', // 文字的颜色,默认 #fff。

              fontSize: 6 // 文字的字体大小,默认 5。

              // formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
            },
            axisTick: {
              // 刻度(线)样式。
              length: 4 // 刻度线长。支持相对半径的百分比,默认 8
            },
            lineStyle: {
              // 刻度(线)样式。
              width: 0.5 //线度,默认 1。
            },
            pointer: {
              // 仪表盘指针。

              show: true, // 是否显示指针,默认 true。

              length: '45%', // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。

              width: 2 // 指针宽度,默认 8。
            },
            detail: { formatter: '{value}%' },
            data: [
              {
                value: 88,
                name: '投资强度不足',
                detail: {
                  fontSize: 14,
                  color: '#464646', // 数据详情颜色
                  offsetCenter: ['0%', '60%']
                },
                title: {
                  value: 'hhhhh',
                  color: '#464646' // 标题颜色
                }
              }
            ]
          }
        ]
      },
      option4: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '数据指标',
            type: 'gauge',
            axisLine: {
              lineStyle: {
                color: [
                  [0.3, '#47c561'],
                  [0.8, '#3e96fa'],
                  [1, '#f04c55']
                ]
              }
            },
            title: {
              //仪表盘标题show: true,
              offsetCenter: ['0', '73'],
              textStyle: {
                color: '#444A56',
                fontSize: 12,
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei'
              }
            },
            axisLabel: {
              // 刻度标签。

              // show: true, // 是否显示标签,默认 true。

              distance: 11, // 标签与刻度线的距离,默认 5。

              color: '#000', // 文字的颜色,默认 #fff。

              fontSize: 6 // 文字的字体大小,默认 5。

              // formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
            },
            axisTick: {
              // 刻度(线)样式。
              length: 4 // 刻度线长。支持相对半径的百分比,默认 8
            },
            lineStyle: {
              // 刻度(线)样式。
              width: 0.5 //线度,默认 1。
            },
            pointer: {
              // 仪表盘指针。

              show: true, // 是否显示指针,默认 true。

              length: '45%', // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。

              width: 2 // 指针宽度,默认 8。
            },
            detail: { formatter: '{value}%' },
            data: [
              {
                value: 88,
                name: '应完工未完工',
                detail: {
                  fontSize: 14,
                  color: '#464646', // 数据详情颜色
                  offsetCenter: ['0%', '60%']
                },
                title: {
                  value: 'hhhhh',
                  color: '#464646' // 标题颜色
                }
              }
            ]
          }
        ]
      },
      tableData: [
        {
          number: 1,
          name: '江山中学现代化校园建设工程',
          plan_invest: '2000万元',
          finish_invest: '2000万元',
          all_invest: '2000万元',
          status: '已入库',
          warning_type: '投资强度不足',
          operate_type: '查看详情'
        },
        {
          number: 2,
          name: '江山中学现代化校园建设工程',
          plan_invest: '2000万元',
          finish_invest: '2000万元',
          all_invest: '2000万元',
          status: '已入库',
          warning_type: '投资强度不足',
          operate_type: '查看详情'
        },
        {
          number: 3,
          name: '江山中学现代化校园建设工程',
          plan_invest: '2000万元',
          finish_invest: '2000万元',
          all_invest: '2000万元',
          status: '已入库',
          warning_type: '投资强度不足',
          operate_type: '查看详情'
        },
        {
          number: 4,
          name: '江山中学现代化校园建设工程',
          plan_invest: '2000万元',
          finish_invest: '2000万元',
          all_invest: '2000万元',
          status: '已入库',
          warning_type: '投资强度不足',
          operate_type: '查看详情'
        },
        {
          number: 5,
          name: '江山中学现代化校园建设工程',
          plan_invest: '2000万元',
          finish_invest: '2000万元',
          all_invest: '2000万元',
          status: '已入库',
          warning_type: '投资强度不足',
          operate_type: '查看详情'
        },
        {
          number: 6,
          name: '江山中学现代化校园建设工程',
          plan_invest: '2000万元',
          finish_invest: '2000万元',
          all_invest: '2000万元',
          status: '已入库',
          warning_type: '投资强度不足',
          operate_type: '查看详情'
        },
        {
          number: 7,
          name: '江山中学现代化校园建设工程',
          plan_invest: '2000万元',
          finish_invest: '2000万元',
          all_invest: '2000万元',
          status: '已入库',
          warning_type: '投资强度不足',
          operate_type: '查看详情'
        },
        {
          number: 8,
          name: '江山中学现代化校园建设工程',
          plan_invest: '2000万元',
          finish_invest: '2000万元',
          all_invest: '2000万元',
          status: '已入库',
          warning_type: '投资强度不足',
          operate_type: '查看详情'
        },
        {
          number: 9,
          name: '江山中学现代化校园建设工程',
          plan_invest: '2000万元',
          finish_invest: '2000万元',
          all_invest: '2000万元',
          status: '已入库',
          warning_type: '投资强度不足',
          operate_type: '查看详情'
        }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() {}, //生命周期 - 创建之前
  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() {}, //生命周期 - 挂载之前
  mounted() {
    var chartDom = document.getElementById('main11');
    var chartDom2 = document.getElementById('main22');
    var chartDom3 = document.getElementById('main33');
    var chartDom4 = document.getElementById('main44');
    var myChart = echarts.init(chartDom);
    var myChart2 = echarts.init(chartDom2);
    var myChart3 = echarts.init(chartDom3);
    var myChart4 = echarts.init(chartDom4);
    var option;
    var option2;
    var option3;
    var option4;
    option = this.option;
    option2 = this.option2;
    option3 = this.option3;
    option4 = this.option4;
    option && myChart.setOption(option);
    option2 && myChart2.setOption(option2);
    option3 && myChart3.setOption(option3);
    option4 && myChart4.setOption(option4);
    let sizeFun = function () {
      myChart.resize();
      myChart2.resize();
      myChart3.resize();
      myChart4.resize();
    };
    window.addEventListener('resize', sizeFun);
  }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped lang="less">
@import url('@/assets/icons/iconfont.css');
@import url('@/assets/fonts/font.css');
.warning {
  margin-top: 20px;
  overflow: hidden;
  margin-right: 10px;
  margin-left: 10px;
  background-color: #fff;
  box-shadow: 0px 9px 17px -13px #e4e4e4;
  .top {
    background-color: #fff;
    display: flex;
    border-bottom: 1px solid #ccc;
    .top_left {
      width: 50%;
      position: relative;
      .title {
        font-size: 14px;
        font-weight: bold;
        margin: 10px 0 10px 20px;
      }
      .title::before {
        content: '';
        position: absolute;
        width: 4px;
        height: 15px;
        background-color: #008aff;
        top: 12px;
        left: 8px;
      }
      .yibiaopan {
        display: flex;
      }
      #main11,
      #main22,
      #main33,
      #main44 {
        width: 35%;
        height: 200px;
      }
    }
    .top_right {
      display: flex;
      margin-left: 10px;
      .ccc:hover {
        transform: translateY(-18px);
      }
      .ccc {
        width: 168px;
        height: 210px;
        box-shadow: 0px 3px 10px 3px #e4e4e4;
        text-align: center;
        margin-top: 15px;
        margin-left: 60px;
        transition: all 1s;
        img {
          width: 80px;
          height: 80px;
          margin: 20px 10px 0;
        }
        p {
          margin-top: 10px;
        }
        .text {
          font-weight: bold;
          font-size: 14px;
        }
        .number {
          font-size: 16px;
          color: #0795fb;
          font-weight: bold;
          font-family: number;
        }
      }
    }
  }
  .bottom {
    margin-top: 10px;
    background-color: #fff;
    position: relative;
    .title {
      font-size: 14px;
      font-weight: bold;
      margin: 10px 0 10px 20px;
      color: #000;
    }
    .title::before {
      content: '';
      position: absolute;
      width: 4px;
      height: 15px;
      background-color: #008aff;
      top: 2px;
      left: 8px;
    }
    .main55 {
      width: 100%;
      height: 350px;
      overflow-y: visible;
      font-size: 13px;
    }
    p {
      margin-top: 30px;
      margin: 20px;
      font-size: 14px;
      font-weight: bold;
      line-height: 25px;
    }
  }
}
</style>
